<template>
  <div class="comTopNavBarPro">
    <van-nav-bar
      safe-area-inset-top
      :title="title || '默认标题'"
      left-arrow
      @click-left="onClickLeftIcon"
    >
      <template #right>
        <van-icon
          name="search"
          size="20"
          style="margin-right: 20px; "
          @click="onClickSearchIcon"
        />
        <van-icon
          name="ellipsis"
          size="18"
          @click="onClickRightIcon"
        />
      </template>
    </van-nav-bar>



    <van-overlay
      :show="showOverlayForSearchOrQuery"
      @click="showOverlayForSearchOrQuery = false"
      class-name="com_over_layer"
    >
      <van-cell-group class="layer">
        <van-cell value="搜索（按关键字）" @click="isShowSearchBox = true" />
        <van-cell value="查询（按日期）" @click="isShowDateBox = true" />
      </van-cell-group>
    </van-overlay>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="com_over_layer">
      <van-cell-group class="layer">
        <van-cell value="公司公告" />
        <van-cell value="我的发布" />
        <van-cell value="公司介绍" />
      </van-cell-group>
    </van-overlay>

    <van-search
      v-show="isShowSearchBox"
      v-model="keywordVal"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
      @clear="onClearVal"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <com-search-by-date
      v-show="isShowDateBox"
      @getCalendarValue="toGetCalendarValue"
      :label="'测试'"
    ></com-search-by-date>


  </div>

</template>

<script>
import {Toast} from "vant";
import comSearchByDate from "./comSearchByDate";

export default {
  name: "comTopNavBarPro",
  props: ['title', 'pathForLeft', ],
  components: {
    comSearchByDate,
  },

  data(){
    return {
      // 搜索图标
      isShowSearchBox: false,
      isShowDateBox: false,
      keywordVal: '',
      dateStr: '',
      showOverlayForSearchOrQuery: false,

      // 省略号图标
      showOverlay: false,
    }
  },

  methods: {
    onClickLeftIcon(){
      if (this.pathForLeft){
        this.$router.push(this.pathForLeft)
      } else {
        this.$router.back();
      }
    },

    onClickSearchIcon(){
      if(this.isShowSearchBox || this.isShowDateBox){
        this.isShowSearchBox = false;
        this.isShowDateBox = false
      } else {
        this.showOverlayForSearchOrQuery = !this.showOverlayForSearchOrQuery;
      }

      this.keywordVal = '';
      this.dateStr = '';
      this.showOverlay = false
    },

    onClickRightIcon(){
      this.showOverlay = ! this.showOverlay;
      this.isShowSearchBox = false;
      this.isShowDateBox = false;
      this.showOverlayForSearchOrQuery = false;
      this.keywordVal = '';
      this.dateStr = '';
    },

    onSearch() {
      this.$emit('toGetKeyword', this.keywordVal)
    },
    onClearVal() {
      Toast('已清空');
      this.$emit('toGetKeyword', this.keywordVal)
    },

    toGetCalendarValue(dateVal) {
      // console.log('子组件到父组件的数据', dateVal);
      this.dateStr = dateVal;
      this.$emit('toQueryDateStr', dateVal)
    },

  }

}
</script>

<style lang="scss" scoped>
.comTopNavBarPro{
  .com_over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
}
</style>
